<template>
  <view>
    <!-- 使用 z-paging 组件 -->
    <z-paging ref="paging" v-model="dataList" @query="queryList">
      <view class="item" v-for="(item, index) in dataList" :key="index">
        <view class="item-title">{{ item.title }}</view>
      </view>
    </z-paging>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const paging = ref<ZPagingRef>()
const dataList = ref([])

const queryList = (pageNo: number, pageSize: number) => {
  // 模拟异步请求
  setTimeout(() => {
    const startIndex = (pageNo - 1) * pageSize
    const endIndex = startIndex + pageSize
    const mockData = []
    for (let i = startIndex; i < endIndex; i++) {
      mockData.push({
        title: `Item ${i + 1}`,
      })
    }
    // 模拟请求成功
    if (paging.value) {
      paging.value.complete(mockData)
    }
  }, 1000) // 模拟 1 秒的网络延迟
}
</script>

<style scoped>
/* 页面样式 */
</style>
